
<style type="text/css">
    img {
        border: 1px solid #000;
    }
</style>
<div class="container">

    <a href="http://www.xiaofeiting.com/test/dsp/adddsp">跳转</a>
    <div class="row text-center">
        <div class="col-xs-12">
            <h1>bootstrap中css学习</h1>
            <blockquote>
                <small>by:json</small>
            </blockquote>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="row ">
        <h1 class="page-header">栅格化</h1>
        <div class="col-xs-3 text-center"><img src='holder.js/100%x200'/></div>
        <div class="col-xs-3 text-center"><img src='holder.js/100%x200'/></div>
        <div class="col-xs-3 text-center"><img src='holder.js/100%x200'/></div>
        <div class="col-xs-3 text-center"><img src='holder.js/100%x200'/></div>
        <div class="clearfix"></div>
    </div>
    <div class="row text-center">
        <div class="col-xs-3"><img src='holder.js/100%x200'/></div>
        <div class="col-xs-3"><img src='holder.js/100%x200'/></div>
        <div class="col-xs-3"><img src='holder.js/100%x200'/></div>
        <div class="col-xs-3"><img src='holder.js/100%x200'/></div>
        <div class="clearfix"></div>
    </div>
    <div class="row text-center">
        <div class="col-xs-3 col-xs-offset-9"><img src='holder.js/100%x200'/></div>
        <div class="clearfix"></div>
    </div>
    <div class="row">
        <h1 class="page-header">欢迎使用 CodeIgniter
            <small>PHP 网站开发者使用的应用程序开发框架和工具包</small>
        </h1>
        <p>
            CodeIgniter 是一套给 PHP 网站开发者使用的应用程序开发框架和工具包。它提供一套丰富的标准库以及简单的接口和逻辑结构，其目的是使开发人员更快速地进行项目开发。使用 CodeIgniter
            可以减少代码的编写量，并将你的精力投入到项目的创造性开发上。
        </p>
    </div>
    <div class="row">
        <h1 class="page-header">blockquote</h1>
        <blockquote class="pull-right page-header">欢迎使用 CodeIgniter
            <small>by:json code</small>
        </blockquote>
        <div class="clearfix"></div>
        <p>
            CodeIgniter 是一套给 PHP 网站开发者使用的应用程序开发框架和工具包。它提供一套丰富的标准库以及简单的接口和逻辑结构，其目的是使开发人员更快速地进行项目开发。使用 CodeIgniter
            可以减少代码的编写量，并将你的精力投入到项目的创造性开发上。
        </p>
    </div>
    <div class="row">
        <h1 class="page-header">ul-li</h1>
       <ul class="list-unstyled">
           <li>可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</li>
           <li>可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</li>
           <li>可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</li>

       </ul>
    </div>
    <div class="row">
        <h1 class="page-header">list-group</h1>
        <ul class="list-group">
            <a class="list-group-item">可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</a>
            <a class="list-group-item">可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</a>
            <a class="list-group-item">可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</a>

        </ul>
    </div>
    <div class="row">
        <h1 class="page-header">pre</h1>
        <pre>
            if($test=='')
            {
                echo "this is test";
            }
        </pre>
    </div>
    <div class="row">
        <h1 class="page-header">list-group</h1>
        <ul class="list-group">
            <a class="list-group-item">可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</a>
            <a class="list-group-item">可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</a>
            <a class="list-group-item">可以减少代码的编写量，并将你的精力投入到项目的创造性开发上</a>

        </ul>
    </div>
    <div class="row">
        <h1 class="page-header">table</h1>
        <table class="table table-bordered table-striped table-hover">
            <tr><th>ID</th><th>名字</th><th>操作</th></tr>
            <tr><td>ID</td><td>名字</td><td>操作</td></tr>
            <tr><td>ID</td><td>名字</td><td>操作</td></tr>
            <tr><td>ID</td><td>名字</td><td>操作</td></tr>
        </table>
    </div>
    <div class="row">
        <h1 class="page-header">table响应式</h1>
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover">
                <tr><th>ID</th><th>名字</th><th>操作</th></tr>
                <tr><td>ID</td><td>名字</td><td>操作</td></tr>
                <tr><td>ID</td><td>名字</td><td>操作</td></tr>
                <tr><td>ID</td><td>名字</td><td>操作</td></tr>
            </table>
        </div>

    </div>
    <div class="row">
        <h1 class="page-header">表单</h1>
        <form class="">
            <div class="form-group form-horizontal">
                    <label class="control-label col-xs-2">名字：</label>
                    <p class="form-control-static col-xs-10">这里写入用户名字</p>
                <div class="clearfix"></div>
            </div>
            <div class="form-group">
                <label for="name" class="control-label">名字：</label><input id="name" class="form-control input-sm" type="text" disabled/>
                <p class="help-block">这里写入用户名字</p>
            </div>
            <div class="form-group">
                <label for="password" class="control-label">密码：</label><input id="password" class="form-control" type="text"/>
                <p class="help-block">这里写入用户密码</p>
            </div>
            <div class="form-group">
                <label for="detail">详情：</label><textarea id="detail" class="form-control" type="text"></textarea>
                <p class="help-block">这里写入用户密码</p>
            </div>
            <div class="form-group">
                <label class="radio-inline"><input type="radio" />记录用户名</label>
                <label class="radio-inline"><input type="radio" />记录用户名</label>
                <label class="radio-inline"><input type="radio" />记录用户名</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" />记录用户名</label>
                <label><input type="checkbox" />记录密码</label>
            </div>
            <input type="submit" class="btn btn-primary" value="登录"/>
            <span class="btn btn-default">重置</span>

            <button class="btn btn-default btn-block">按键</button>
        </form>

    </div>
    <div class="row">
        <h1 class="page-header">图片</h1>
        <img src="holder.js/300x300" class="img-rounded"/>
        <img src="holder.js/300x300" class="img-circle"/>
        <img src="holder.js/300x300" class="img-thumbnail"/>

    </div>
    <div class="row">
        <h1 class="page-header">响应式图片</h1>
        <img src="holder.js/800x300" class="img-responsive"/>

    </div>
    <div class="row">
        <h1 class="page-header">well类和close按钮和向下箭头</h1>
        <div class="well">
            <span class="close">&times;</span>
            <h1>这里是标题<span class="caret"></span></h1>
            如果你希望通过隐藏 CodeIgniter 文件的位置来增加安全性，你可以修改 system 和 application 目录的名字，把它改成任何你想改的。如果已经修改了名字，你必须打开你主目录下面的 index.php 文件设置里面的 $system_path 和 $application_folder 变量，把它设成你新改的名字。

            为了安全考虑,system和application两个文件夹应放到网站根目录（Web Root）以外的地方，这样浏览器就不能够直接访问它们。在默认设置下, 在每个文件夹中都有一个.htaccess配置文件以拒绝直接访问, 但是当把代码部署到生产环境时最好移除他们，因为生成环境的web服务可能会改变或不支持.htaccess的配置.


        </div>
    </div>
</div>

